import { useState } from 'react'

// 函数组件 --- 演示复杂数据类型
function Header() {
  const [form, setFrom] = useState({
    cardName: '月卡',
    cardPrice: 0
  })

  const updateCard = () => {
    // 要修改数据，不能像下面这样直接修改，应该使用hooks返回的函数去修改稿
    // form.cardName = '年卡'
    // 修改复杂数据类型，应该使用 "替换" 不是修改
    setFrom({
      ...form,
      cardName: '年卡'
    })
  }
  return (
    <>
      <div>我是函数组件 --- {form.cardName}</div>
      <button onClick={updateCard}>修改月卡名称</button>
    </>
  )
}


function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

export default App